.search-container {
  width: 80vw;
  min-width: 300px;
  max-width: 1200px;
  padding-top: 50px;
  margin: 0 auto;
  transition-duration: 300ms;
  transition-property: font-size, padding, width;

  .logo-row {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding: 50px 0 70px 0;
    transition-duration: 300ms;
    transition-property: padding;
    position: relative;

    ::v-deep .v-btn {
      align-self: center;

      .v-btn__content {
        opacity: 1 !important;

        .logo {
          width: 50vw;
          min-width: 200px;
          max-width: 400px;
          position: absolute;
        }
      }
    }
  }

  .search-field-row {
    width: 100%;
    min-width: 300px;
    display: flex;
    flex-direction: row;
    transition-duration: 300ms;
    transition-property: width;
    margin: 46px auto 0;

    .search-field {
      width: 100%;
      height: inherit;
      display: flex;
      margin-left: auto;

      ::v-deep .v-text-field {
        align-self: center;

        .v-input__slot {
          min-height: 40px;

          label {
            top: 16px;
          }

          .v-input__append-inner {
            margin-top: 0;

            .v-btn {
              align-self: center;

              .v-btn__content {
                opacity: 1 !important;

                .v-icon {
                  margin-left: 5px;
                }
              }
            }
          }
        }
      }
    }
  }

  @media screen and (min-width: 600px) and (max-width: 1200px) {
    width: 90vw;
    padding: 50px 1vw;

    .logo-row {
      padding: 50px 0 60px 0;
    }

    .search-field-row {
      width: 80vw;

      .search-field {
        width: 100%;
      }
    }
  }

  @media screen and (max-width: 600px) {
    width: 90vw;
    padding: 50px 1vw;

    .logo-row {
      padding: 50px 0 50px 0;
    }

    .search-field-row {
      .search-field {
        width: 100%;
      }
    }
  }
}